<template>
  <div class="page-container min-h-screen bg-gray-100 flex">
    <!-- 侧边菜单栏 -->
    <aside class="menu-container w-64 h-screen bg-white shadow-md fixed left-0 top-0 overflow-y-auto z-50">
      <nav class="py-4">
        <ul class="space-y-1">
          <li
            v-for="(menuItem, index) in menuList"
            :key="index"
            class="relative"
          >
            <!-- 修改点击事件和激活状态判断 -->
            <div
              @click="toggleSubMenu(index)"
              class="flex items-center px-4 py-2.5 cursor-pointer hover:bg-blue-50 transition duration-300"
              :class="{
                'bg-blue-50 text-blue-600': isSubMenuOpen[index] || hasActiveChild(menuItem)
              }"
            >
              <!-- 图标和文字 -->
              <i :class="menuItem.icon" class="text-gray-600"></i>
              <span class="ml-3 text-gray-700 font-medium">{{ menuItem.label }}</span>
              <i
                class="fas fa-chevron-right ml-auto text-gray-400 transition-transform duration-300"
                :style="{ transform: isSubMenuOpen[index] ? 'rotate(90deg)' : 'rotate(0deg)' }"
              ></i>
            </div>
            <!-- 子菜单 -->
            <ul
              v-if="menuItem.children && isSubMenuOpen[index]"
              class="sub-menu bg-gray-50 py-2 overflow-hidden transition-all duration-300"
            >
              <li
                v-for="(subMenuItem, subIndex) in menuItem.children"
                :key="subIndex"
                class="relative"
              >
                <!-- 二级菜单点击事件修改 -->
                <div
                  v-if="!subMenuItem.children"
                  class="flex items-center px-8 py-2.5 cursor-pointer hover:bg-blue-50 transition duration-300"
                  :class="{
                    'bg-blue-50 text-blue-600': activeMenu === subMenuItem.name
                  }"
                  @click="handleMenuClick(subMenuItem)"
                >
                  <i :class="subMenuItem.icon" class="text-gray-600"></i>
                  <span class="ml-3 text-gray-700">{{ subMenuItem.label }}</span>
                </div>
                <!-- 三级菜单结构保持不变 -->
                <template v-else>
                  <div
                    @click="toggleSubSubMenu(index, subIndex)"
                    class="flex items-center px-8 py-2.5 cursor-pointer hover:bg-blue-50 transition duration-300"
                    :class="{ 'bg-blue-50 text-blue-600': isSubSubMenuOpen[index + '-' + subIndex] }"
                  >
                    <i :class="subMenuItem.icon" class="text-gray-600"></i>
                    <span class="ml-3 text-gray-700">{{ subMenuItem.label }}</span>
                    <i
                      class="fas fa-chevron-right ml-auto text-gray-400 transition-transform duration-300"
                      :style="{ transform: isSubSubMenuOpen[index + '-' + subIndex] ? 'rotate(90deg)' : 'rotate(0deg)' }"
                    ></i>
                  </div>
                  <ul
                    v-if="isSubSubMenuOpen[index + '-' + subIndex]"
                    class="sub-sub-menu bg-gray-50 py-2 overflow-hidden transition-all duration-300"
                  >
                    <li
                      v-for="(subSubMenuItem, subSubIndex) in subMenuItem.children"
                      :key="subSubIndex"
                      class="flex items-center px-12 py-2.5 cursor-pointer hover:bg-blue-50 transition duration-300"
                      :class="{ 'bg-blue-50 text-blue-600': activeMenu === subSubMenuItem.name }"
                      @click="handleClick(subSubMenuItem.name)"
                    >
                      <i :class="subSubMenuItem.icon" class="text-gray-600"></i>
                      <span class="ml-3 text-gray-700">{{ subSubMenuItem.label }}</span>
                    </li>
                  </ul>
                </template>
              </li>
            </ul>
          </li>
        </ul>
      </nav>
    </aside>

    <!-- 主内容区域 -->
    <main class="flex-1 ml-64 p-6 min-h-screen">
      <div class="bg-white rounded-lg shadow-md p-6">
        <router-view></router-view>
      </div>
    </main>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, onMounted, watch } from 'vue';

const router = useRouter();
const route = useRoute();

// 当前激活的菜单项
const activeMenu = ref('');

// 定义菜单数据结构
const menuList = [
  {
    name: 'SystemManagerView',
    label: '系统配置',
    icon: 'fas fa-cogs',
    children: [
      {
        name: 'ModelProviderManagement',
        label: '模型供应商管理',
        icon: 'fas fa-users'
      },
      {
        name: 'UserPermissionManagement',
        label: '用户权限管理',
        icon: 'fas fa-shield-alt',
        children: [
          {
            name: 'UserRoleManagement',
            label: '用户角色管理',
            icon: 'fas fa-user-tag'
          },
          {
            name: 'FunctionMenuManagement',
            label: '功能菜单管理',
            icon: 'fas fa-bars'
          }
        ]
      },
      {
        name: 'LogisticsTransportKnowledgeBaseManagement',
        label: '物流运输知识库管理',
        icon: 'fas fa-truck'
      },
      {
        name: 'ExpenseReimbursementKnowledgeBaseManagement',
        label: '费用报销知识库管理',
        icon: 'fas fa-file-invoice-dollar'
      }
    ]
  }
];

// 添加菜单激活状态检查方法
const hasActiveChild = (menuItem) => {
  return menuItem.children?.some(child =>
    child.name === activeMenu.value ||
    child.children?.some(subChild => subChild.name === activeMenu.value)
  )
}


// 修改点击处理方法
const handleMenuClick = (menuItem) => {
  activeMenu.value = menuItem.name
  router.push({ name: menuItem.name })
}

// 用于存储子菜单的展开状态
const isSubMenuOpen = ref(Array(menuList.length).fill(true));
const isSubSubMenuOpen = ref({});

// 切换子菜单展开状态
const toggleSubMenu = (index) => {
  isSubMenuOpen.value[index] = !isSubMenuOpen.value[index];
};

// 切换三级菜单展开状态
const toggleSubSubMenu = (parentIndex, subIndex) => {
  const key = `${parentIndex}-${subIndex}`;
  isSubSubMenuOpen.value[key] = !isSubSubMenuOpen.value[key];
};

// 处理菜单点击
// 在菜单项点击时自动关闭子菜单
const handleClick = (item) => {
  try {
    activeMenu.value = item.name
    router.push({
      name: item.name // 确保这里使用的是正确的变量
    })
  } catch (error) {
    console.error('路由跳转失败:', error)
    // 可添加用户提示
  }
}
// 添加路由监听
watch(() => route.name, (newVal) => {
  activeMenu.value = newVal
})

// 初始化时根据路由设置激活的菜单项
// 初始化状态
onMounted(() => {
  activeMenu.value = route.name
  // 自动展开包含当前路由的父菜单
  menuList.forEach((menuItem, index) => {
    if (menuItem.children?.some(child => child.name === route.name)) {
      isSubMenuOpen.value[index] = true
    }
  })
})
</script>

<style scoped>
.menu-container {
  border-right: 1px solid #e5e7eb;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  overflow-y: auto;
  z-index: 50;
}

/* 滚动条样式优化 */
.menu-container::-webkit-scrollbar {
  width: 6px;
}

.menu-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.menu-container::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

.menu-container::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .menu-container {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
  }
  
  .menu-container.active {
    transform: translateX(0);
  }
  
  main {
    margin-left: 0;
  }
}

/* 添加过渡动画 */
.sub-menu,
.sub-sub-menu {
  transition: all 0.3s ease-in-out;
}

/* 选中状态的图标颜色 */
.bg-blue-50 i {
  color: #2563eb;
}
</style>